<template>
  <div class="header">
    <div></div>
    <div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar shape="square" size="medium" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">个人中心</el-dropdown-item>
          <el-dropdown-item command="b">布局设置</el-dropdown-item>
          <el-dropdown-item command="c" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
export default {
  name: "HeaderMenu",
  data() {
    return {};
  },
  methods: {
    handleCommand(command) {
      // 导航到个人中心
      if (command == "a") {
        this.$router.push('/PersonalCenter');
      }

      // 退出登录
      if (command == "c") {
        this.logout();
      }
    },

    logout() {
      console.log("触发了");
      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 56px;
  display: flex;
  /* 设置子标签布局方式，space-between控制父级下亲儿子 第一个和最后一个两端对齐，中间儿子 平分剩余空间*/
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
    i {
      font-size: 25px;
      margin-left: 5px;
      margin-right: 10px;
      margin-top: 10px;
    }
  }
}
</style>